<template>
    <div class="platformMaster-wrapper">
        <IHeader class="header" back="true" title="工坊高人"></IHeader>
        <list class="masterList" v-if="itemList && itemList.length > 0" @loadmore="loadMore" loadmoreoffset="50">
            <cell class="masterItem" v-for="(item, index) in itemList" :key="index" :class="[index !== (itemList.length - 1) ? 'border_bottom_ebebeb' : '']" @click="checkDetail(index)">
                <div class="master-information flex_row">
                    <image class="master-avatar" :src="item.headPortraitUrl"></image>
                    <div class="information-detail">
                        <text class="master-type fs_26 col_868686">{{filterType(item.masterType)}}</text>
                        <text class="master-name col_464646 fs_30">{{item.name}}</text>
                        <text class="master-type fs_24 col_868686">个性签名：{{item.motto}}</text>
                        <div class="check-description">
                            <text class="check col_ff0f37 fs_24">查看简介</text>
                            <image class="arrow" :src="imgPath(activeIndex === index ? 'triangle_up.png' : 'triangle_down.png')"></image>
                        </div>
                    </div>
                </div>
                <text class="master-description fs_24 col_868686" v-if="activeIndex === index">{{item.evaluation}}</text>
            </cell>
        </list>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { WxcLoading } from 'weex-ui'
import { getMasterList } from '@/api/market'

const modal = weex.requireModule('modal')

export default {
  name: 'platformMaster',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      pageNo: 1,
      pageSize: 10,
      itemList: [], // 数据数组
      hasMore: true, // 是否还有数据
      settleList: ['泳装厂', '面料厂', '辅料厂', '设计师', '打版师', '样衣工', '裁床工', '临时工'],
      activeIndex: -1
    }
  },
  mounted () {
    const that = this
    that.getDataList()
  },
  methods: {
    filterType (type) {
      const that = this
      let str = that.settleList[Number(type) - 1]
      return str
    },
    getDataList () { // 获取数据列表
      const that = this
      let params = {
        masterType: ''
      }
      that.loadingShow = true
      that.$api.get(getMasterList + that.pageNo + '/' + that.pageSize, params, (res) => {
        that.loadingShow = false
        let list = res.data.records
        if (list.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.itemList = that.itemList.concat(list)
      }, () => {
        that.loadingShow = false
      })
    },
    loadMore () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    },
    checkDetail (inx) {
      const that = this
      that.activeIndex = that.activeIndex === inx ? -1 : inx
    }
  },
  components: {
    IHeader,
    WxcLoading
  }
}
</script>

<style scoped>
    .fs_24 {
        font-size: 24px;
    }
    .fs_26 {
        font-size: 26px;
    }
    .fs_30 {
        font-size: 30px;
    }
    .col_464646 {
        color: #464646;
    }
    .col_868686 {
        color: #868686;
    }
    .col_ff0f37 {
        color: #ff0f37;
    }
    .flex_row {
        flex-direction: row;
    }
    .align_center {
        align-items: center;
    }
    .border_bottom_ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .masterList {
        margin-top: 88px;
        min-height: 500px;
    }
    .master-information {
        padding-left: 24px;
        padding-right: 24px;
    }
    .master-information {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .master-avatar {
        width: 130px;
        height: 130px;
        border-radius: 65px;
    }
    .information-detail {
        flex: 1;
        margin-left: 50px;
    }
    .master-type {
        line-height: 36px;
        font-family: medium;
    }
    .master-name {
        font-family: bold;
        line-height: 58px;
    }
    .check-description {
        position: absolute;
        top: 50px;
        right: 0;
        height: 30px;
        flex-direction: row;
        align-items: center;
    }
    .check {
        line-height: 30px;
    }
    .arrow {
        width: 18px;
        height: 12px;
        margin-left: 8px;
    }
    .master-description {
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        padding-right: 24px;
        line-height: 36px;
        font-family: medium;
        background-color: #f5f5f5;
    }
</style>
